const webpackMerge = require('webpack-merge');

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

const baseConfig = require('./webpack.base');
const { DIST_PATH, PUBLIC_PATH, DEV_BACKEND_SERVER } = require('./utils/variables');

const devConfig = {
  mode: 'development',
  cache: {
    type: 'filesystem',
    allowCollectingMemory: true,
  },
  plugins: [new ReactRefreshWebpackPlugin()],
  devtool: 'eval-cheap-module-source-map',
  stats: 'errors-only',
  watchOptions: {
    aggregateTimeout: 500,
    poll: 1000,
    ignored: /node_modules/,
  },
  devServer: {
    open: true,
    compress: true, // 是否启用 gzip 压缩
    host: 'localhost',
    port: 8080,
    hot: true,
    client: {
      logging: 'info',
      overlay: {
        errors: true,
        warnings: false,
      },
    },
    static: {
      directory: DIST_PATH,
      publicPath: PUBLIC_PATH,
    },
    historyApiFallback: true, // history路由兜底到 index.html
    allowedHosts: 'all', // 允许使用内网穿透
    proxy: !!DEV_BACKEND_SERVER
      ? {
          '/api': {
            target: DEV_BACKEND_SERVER,
            changeOrigin: true,
            pathRewrite: {
              '^/api': '',
            },
          },
        }
      : undefined,
  },
};

const mergedConfig = webpackMerge.merge(baseConfig, devConfig);

module.exports = mergedConfig;
